<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org xmlns:shiro=http://www.pollix.at/thymeleaf/shiro>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<link rel="stylesheet" th:href="@{/css/gonggon.css}"/>
<link rel="stylesheet" th:href="@{/css/index.css}"/>
<script type="text/javascript" src="/js/jq.js"></script>

<body>


    <div>
        <div class="top">
             <div class="tl">
                 <img src="/png/jiudian2.png" class="timg">
                 <div class="tt">
                     <spanp>秃秃大酒店</spanp>
                 </div>
             </div>
             <div class="tlog">
                 <div class="lo" th:if="${session.loginuser!=null}">
                     欢迎您<span th:text="${session.loginuser.getName()}"></span>
                 </div>
                 <div class="tre" th:if="${session.loginuser==null}">
                     <a th:href="@{/zhu}">注册</a>
                     <a th:href="@{/login}">登录</a>
                 </div>
                 <div class="zhu"  th:if="${session.loginuser!=null}">
                     <a th:href="@{/loginout}" class="zhu">注销</a>
                 </div>

             </div>
        </div>


        <div class="hea">
            <div class="nav">
                <ul class="nul">
                    <li>
                       <a th:href="@{/}">首页</a>
                    </li>
                    <li>
                        <a th:href="@{html/yuding}">客房与套房</a>
                    </li>
                    <!--<li>
                        <a href="#">酒店预定</a>
                    </li>-->
                    <li>
                        <a th:href="@{/html/selectUid/}+${session.id}">我的</a>
                    </li>
                        <li th:if="${session.perms=='admin'}">
                        <a th:href="@{html/admin}">后台管理</a>
                        </li>


                </ul>
            </div>
            <div class="sou">
               <!-- <input type="text" placeholder="套件 豪华 双人房.....">
                <button><i>搜索</i></button>-->
            </div>
        </div>



        <!--轮播图-->
        <div class="container" id="contaner">

            <div class="content" id="content">

                <div class="slider-img" id="slider" >

                    <a href="javascript:;" >

                        <input type="hidden" id="imag1" th:value="${s[0].getImg()}">
                        <input type="hidden" id="imag2" th:value="${s[1].getImg()}">
                        <input type="hidden" id="imag3" th:value="${s[2].getImg()}">
                        <input type="hidden" id="imag4" th:value="${s[3].getImg()}">
                        <input type="hidden" id="imag5" th:value="${s[4].getImg()}">

                        <!--<img src="/png/1.jpeg" alt="1.jpg" id="img">-->
                        <img th:src="${s[0].getImg()}" alt="1.jpg" id="img">

                    </a>

                </div>

            </div>

            <div class="btn">

                <div class="left" id="left">

                    <a href="#">< </a>


                </div>

                <div class="right" id="right">

                    <a href="#"> > </a>

                </div>

            </div>

            <div class="dot">

                <ul id="ull" class="dotul">

                    <li class="active l" data-n="0"></li>

                    <li class="l" data-n="1"></li>

                    <li class="l" data-n="2"></li>

                    <li class="l" data-n="3"></li>

                    <li class="l" data-n="4"></li>

                </ul>

            </div>



        </div>


        <div class="nei">
            <div class="nn" >
                    <img th:src="${r[0].getImg()}" class="one">
                    <div class="text1" >
                        <h2 th:text="${r[0].getRoomname()}"><span class="fu" ></span> </h2>
                        <p class="yang" th:text="${r[0].getTitl()}"></p>
                        <p th:text="${r[0].getTitll()}"></p>
                        <button>
                        <a th:href="@{html/ding/}+${r[0].getId()}">立即预定</a>
                        </button>

                      <!--  <p th:text="${r[0].getLou()}"></p>-->
                        <a th:href="@{html/xiang/}+${r[0].getId()}" class="xiang">详情页</a>

                    </div>
            </div>

            <div class="nn nn2">
                <div class="text1 text2">
                    <h2 th:text="${r[1].getRoomname()}"><span class="fu">| </span></h2>
                    <p class="yang" th:text="${r[1].getTitl()}"></p>
                    <p th:text="${r[1].getTitll()}"></p>
                    <button>
                        <a th:href="@{html/ding/}+${r[1].getId()}">立即预定</a>
                    </button>
                    <a th:href="@{html/xiang/}+${r[1].getId()}" class="xiang xi">详情页</a>
                </div>
                <img th:src="${r[1].getImg()}"  class="one">
            </div>

            <div class="nn nn3">
                <img th:src="${r[2].getImg()}" class="one">
                <div class="text1">
                    <h2 th:text="${r[2].getRoomname()}"><span class="fu">| </span></h2>
                    <p class="yang" th:text="${r[2].getTitl()}"></p>
                    <p th:text="${r[2].getTitll()}"></p>
                    <button>
                        <a th:href="@{html/ding/}+${r[2].getId()}">立即预定</a>
                    </button>
                    <a th:href="@{html/xiang/}+${r[2].getId()}" class="xiang">详情页</a>
                </div>
            </div>
            <div class="nn nn2">
                <div class="text1 text2">
                    <h2  th:text="${r[3].getRoomname()}"><span class="fu">| </span></h2>
                    <p class="yang" th:text="${r[3].getTitl()}"></p>
                    <p th:text="${r[3].getTitll()}"></p>
                    <button>
                        <a th:href="@{html/ding/}+${r[3].getId()}">立即预定</a>
                    </button>
                    <a th:href="@{html/xiang/}+${r[3].getId()}"class="xiang xi">详情页</a>
                </div>
                <img th:src="${r[3].getImg()}"  class="one">
            </div>
            <div class="quan">

                <button id="btn">

                    <a th:href="@{html/yuding}">查看更多</a>
                </button>
            </div>


        </div>




        <div class="foo">
             <div>
                 <ul class="ful">
                     <li>
                         <a href="#">联系我们</a>
                     </li>
                     <li>
                         <a href="#">帮助中心</a>
                     </li>
                     <li>
                         <a href="#">投诉处理大厅</a>
                     </li>
                     <li>
                         <a href="#"> 问题反馈</a>
                     </li>
                     <li>
                         <a href="#">留言版</a>
                     </li>
                     <li>
                         <a href="#"> 友情连接</a>
                     </li>
                     <li>
                         <a href="#"> 开放平台</a>
                     </li>
                 </ul>
                 <div class="fb">
                     <span>Copyright © 1999-2021 酒店订购 备案号：粤ICP备26152228号-1</span>
                     <div class="tu">
                         <span>秃秃版权所有</span>
                     </div>

                 </div>
             </div>
        </div>

    </div>










    <script>



        //首先要获取元素

        var container = document.getElementById("container");

        var content = document.getElementById("content");

        var slider = document.getElementById("slider");

        var img = document.getElementById("img");

        var ul = document.getElementById("ull");

         /*var li = document.getElementsByTagName("li");*/
        var li=document.getElementsByClassName("l")

        var left = document.getElementById("left");

        var right = document.getElementById("right");

        var num = 0;

        var timer = null;






        var ima1=document.getElementById("imag1").value;
        var ima2=document.getElementById("imag2").value;
        var ima3=document.getElementById("imag3").value;
        var ima4=document.getElementById("imag4").value;
        var ima5=document.getElementById("imag5").value;
        //图片位置
        var arr=[ima1,ima2,ima3,ima4,ima5]

       /* var arrUrl = ["../png/1.jpeg","../png/2.jpeg","../png/3.jpeg","../png/img.png","../png/3.jpeg"];*/
         var arrUrl=arr;
        left.onclick = function (ev) {

            num--;

            if (num == -1){

                num = arrUrl.length-1;//如果到了第一张，返回最后一张

            }

            changeImg();

        };

        right.onclick = function (ev) {

            num++;

            if (num == arrUrl.length){

                num = 0;//如果是最后一张，则返回第一张

            }

            changeImg();

        };

        //点击小圆点跳转到对应的图片

        for (var i=0;i<arrUrl.length;i++){


            li[i].index = i;


            li[i].onclick = function (ev) {

                num = this.index;


                changeImg();

            }

        }



        setTimeout(autoPlay(),1000);//延迟1秒执行自动切换



        //鼠标移入清除定时器，鼠标移出恢复

        content.onmouseover = function (ev) {

            clearInterval(timer);

        };

        content.onmouseout = autoPlay;



        //图片切换函数

        function changeImg() {


            img.src = arrUrl[num];//改变图片src位置




/*
            for (let i = 0; i< li.length; i++){//改变原点样式

                if(num==i){
                    li[i-1].className = "active";
                }else {
                    li[i].className = "";
                }



                /!*      li[i].id = ""*!/
            }

            li[num].className = "active";

           /!*      li[num].id="active"*!/*/


            console.log(num)
            switch (num){
                case 0:
                    li[0].className="active"
                    break
                case 1:
                    li[1].className="active"
                    break
                case 2:
                    li[2].className="active"
                    break
                case 3:
                    li[3].className="active"
                    break
                case 4:
                    li[4].className="active"
                    break
               /* default:
                    li[num].className=""
                    break*/
            }
        }

        //设置定时器

        function autoPlay() {

            timer = setInterval(function () {



                num++;

                num %= arrUrl.length;

                changeImg(num);



            },2000);

        }

    </script>
</body>


</html>